<template>
    <div>
        
        <table class="tb">
            <tr>
                <th>全选 <input type="checkbox" v-model="allcheck" @change="allcheckchange"></th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <!-- 动态生成 -->
            <tr v-for="(item,index) of products" :key="item.id">
                <td>
                    <input type="checkbox" v-model="checks" :value="item" >
                </td>
                <td>
                    <img  height="100" :src="item.imgsrc" alt="">
                </td>
                <td>
                    {{item.code}}
                </td>
                <td>
                    {{item.productName}}
                </td>
                <td>
                    {{item.price}}
                </td>
                <td>
                    <button @click="down(item)" :disabled="item.count==1">-</button>
                    &nbsp;
                    {{item.count}}
                    &nbsp;
                    <button @click="up(item)">+</button>
                </td>
                <td>
                    <button @click="dele(index)">删除</button>
                </td>
            </tr>
        </table>
        <h1 class="add">总价：{{total}}</h1>
    </div>
</template>

<script>
// 初始数据
    let initData = ([
                    {
                        id:Math.random().toString(16).substring(2),
                    imgsrc:"https://img0.baidu.com/it/u=2636633720,2705136804&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=643",
                    code:"1122",
                    count:1,
                    productName:"吴签的签",
                    price:0.1
                },
                {
                    id:Math.random().toString(16).substring(2),
                    imgsrc:"https://img2.baidu.com/it/u=3774311998,2769833858&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=378",
                    code:"1123",
                    count:2,
                    productName:"品如的衣柜",
                    price:100
                },
                {
                    id:Math.random().toString(16).substring(2),
                    imgsrc:"https://img2.baidu.com/it/u=1288758119,3140755471&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
                    code:"1124",
                    count:3,
                    productName:"坤坤的球",
                    price:111
                },
                ])

// 本地存储 封装个方法
    let local = {
        get(key){  // 拿去存储
            return JSON.parse(localStorage.getItem(key))
        },
        set(key,value){ // 设置存储
            localStorage.setItem(key,JSON.stringify(value))
        }
    }
    
    export default {
        data(){
            return {
                // 对象中的字段 产品名称 数量等信息
                products: local.get('data') ?? initData,

                // 勾选的商品
                checks:[],
                // 全选的值
                allcheck:false
            }
        },
        computed:{
            total(){
                let res = this.checks.reduce((total,item)=>{
                    return total += item.price*item.count
                },0)
                return res.toFixed(2)
            }
        },
        methods:{
            dele(index){
                this.products.splice(index,1)
                local.set('data',this.products)
            },
          allcheckchange(){
            if(this.allcheck){
                this.checks = this.products
            }else{
                this.checks = [];
            }
          },
          up(item){
            item.count++
          },
          down(item){
            item.count--;
          }
        },
        mounted(){
             this.$emit('pro',this.products);
        },
        watch:{
            checks(newVal){
                if(newVal.length === this.products.length){
                    this.allcheck = true
                }else{
                    this.allcheck = false
                }
            }
        }
    }
</script>

<style scoped>
    .tb{
        width: 815px;
        text-align: center;
        border-collapse: collapse;
    }
   
      .tb th {
        background-color: #0094ff;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
        
    }
</style>